{% extends 'base.html' %}
{% load static %}

{% block title %}标签模板管理{% endblock %}

{% block extra_css %}
<link href="{% static 'css/label-ui.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title mb-1">
                            <i class="fas fa-tags text-primary me-2"></i>标签模板管理
                        </h3>
                        <small class="text-muted">Brother PT-9500PC 专业标签打印机</small>
                    </div>
                    <div>
                        <a href="{% url 'assets:label_template_designer' %}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> 创建模板
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- 快速操作区域 -->
                    <div class="quick-actions">
                        <h6 class="mb-3"><i class="fas fa-bolt text-warning me-2"></i>快速操作</h6>
                        <div class="d-flex flex-wrap">
                            <button class="quick-action-btn" data-quick-type="asset">
                                <i class="fas fa-cube me-2"></i>资产标签模板
                            </button>
                            <button class="quick-action-btn" data-quick-type="equipment">
                                <i class="fas fa-tools me-2"></i>设备标签模板
                            </button>
                            <button class="quick-action-btn" data-quick-type="location">
                                <i class="fas fa-map-marker-alt me-2"></i>位置标签模板
                            </button>
                            <button class="quick-action-btn" data-action="import">
                                <i class="fas fa-file-import me-2"></i>导入模板
                            </button>
                            <button class="quick-action-btn" data-action="export">
                                <i class="fas fa-file-export me-2"></i>导出模板
                            </button>
                        </div>
                    </div>

                    <!-- 筛选区域 -->
                    <div class="filter-section">
                        <form method="get" class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label"><i class="fas fa-ruler me-1"></i>标签尺寸</label>
                                <select name="size" class="form-select">
                                    <option value="">🏷️ 全部尺寸</option>
                                    <option value="6mm" {% if current_filters.size == '6mm' %}selected{% endif %}>📏 6mm (适用于细小物品)</option>
                                    <option value="9mm" {% if current_filters.size == '9mm' %}selected{% endif %}>📏 9mm (适用于小型设备)</option>
                                    <option value="12mm" {% if current_filters.size == '12mm' %}selected{% endif %}>📏 12mm (适用于常规资产)</option>
                                    <option value="18mm" {% if current_filters.size == '18mm' %}selected{% endif %}>📏 18mm (适用于中型设备)</option>
                                    <option value="24mm" {% if current_filters.size == '24mm' %}selected{% endif %}>📏 24mm (适用于大型设备)</option>
                                    <option value="36mm" {% if current_filters.size == '36mm' %}selected{% endif %}>📏 36mm (适用于机柜标识)</option>
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label"><i class="fas fa-search me-1"></i>搜索</label>
                                <input type="text" name="search" class="form-control" 
                                       placeholder="🔍 搜索模板名称、描述或创建者..." 
                                       value="{{ current_filters.search }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label"><i class="fas fa-filter me-1"></i>类型</label>
                                <select name="type" class="form-select">
                                    <option value="">全部类型</option>
                                    <option value="public" {% if current_filters.type == 'public' %}selected{% endif %}>公开模板</option>
                                    <option value="private" {% if current_filters.type == 'private' %}selected{% endif %}>私有模板</option>
                                    <option value="shared" {% if current_filters.type == 'shared' %}selected{% endif %}>共享模板</option>
                                </select>
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary me-2">
                                    <i class="fas fa-search"></i> 搜索
                                </button>
                                <a href="{% url 'assets:label_template_list' %}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times"></i> 清除
                                </a>
                            </div>
                        </form>
                    </div>

                    <!-- 模板列表 -->
                    {% if page_obj %}
                        <div class="template-grid">
                            {% for template in page_obj %}
                                {% include 'assets/partials/template_card_grid.html' with template=template %}
                            {% endfor %}
                        </div>

                        <!-- 分页 -->
                        {% if page_obj.has_other_pages %}
                        <nav aria-label="模板分页">
                            <ul class="pagination justify-content-center">
                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page=1{% if current_filters.size %}&size={{ current_filters.size }}{% endif %}{% if current_filters.search %}&search={{ current_filters.search }}{% endif %}{% if current_filters.type %}&type={{ current_filters.type }}{% endif %}">首页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if current_filters.size %}&size={{ current_filters.size }}{% endif %}{% if current_filters.search %}&search={{ current_filters.search }}{% endif %}{% if current_filters.type %}&type={{ current_filters.type }}{% endif %}">上一页</a>
                                    </li>
                                {% endif %}

                                <li class="page-item active">
                                    <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                                </li>

                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if current_filters.size %}&size={{ current_filters.size }}{% endif %}{% if current_filters.search %}&search={{ current_filters.search }}{% endif %}{% if current_filters.type %}&type={{ current_filters.type }}{% endif %}">下一页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if current_filters.size %}&size={{ current_filters.size }}{% endif %}{% if current_filters.search %}&search={{ current_filters.search }}{% endif %}{% if current_filters.type %}&type={{ current_filters.type }}{% endif %}">末页</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-tag fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">暂无标签模板</h5>
                            <p class="text-muted">点击上方"创建模板"按钮开始创建您的第一个标签模板</p>
                            <a href="{% url 'assets:label_template_designer' %}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> 创建模板
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 预览模态框 -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-eye text-primary me-2"></i>标签预览
                    <small class="text-muted ms-2">Brother PT-9500PC</small>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="preview-container text-center">
                            <div id="previewContent">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">加载中...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="print-settings">
                            <h6 class="mb-3"><i class="fas fa-cog me-2"></i>打印设置</h6>
                            
                            <div class="mb-3">
                                <label class="form-label">打印份数</label>
                                <input type="number" class="form-control" id="previewCopies" value="1" min="1" max="10">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">打印质量</label>
                                <select class="form-select" id="previewQuality">
                                    <option value="180dpi">标准 (180dpi)</option>
                                    <option value="360dpi" selected>高质量 (360dpi)</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">标签类型</label>
                                <select class="form-select" id="previewLabelType">
                                    <option value="continuous">连续标签</option>
                                    <option value="precut" selected>预切标签</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="previewCutEach" checked>
                                    <label class="form-check-label" for="previewCutEach">
                                        每张标签后切割
                                    </label>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="previewMirror">
                                    <label class="form-check-label" for="previewMirror">
                                        镜像打印
                                    </label>
                                </div>
                            </div>
                            
                            <div class="printer-status mt-4 p-3">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-circle text-success me-2"></i>
                                    <span class="text-success fw-bold">打印机就绪</span>
                                </div>
                                <small class="text-muted d-block mt-1">Brother PT-9500PC 已连接</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>关闭
                </button>
                <button type="button" class="btn btn-success" onclick="printPreview()">
                    <i class="fas fa-print me-1"></i>开始打印
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 导入模板模态框 -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-file-import text-primary me-2"></i>导入标签模板
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">选择模板文件</label>
                    <input type="file" class="form-control" id="importFile" accept=".json,.xml">
                    <div class="form-text">支持 JSON 和 XML 格式的模板文件</div>
                </div>
                
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="importOverwrite">
                        <label class="form-check-label" for="importOverwrite">
                            覆盖同名模板
                        </label>
                    </div>
                </div>
                
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    导入的模板将自动适配 Brother PT-9500PC 打印机设置
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="confirmImport()">
                    <i class="fas fa-upload me-1"></i>开始导入
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 导出模板模态框 -->
<div class="modal fade" id="exportModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-file-export text-primary me-2"></i>导出标签模板
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">导出格式</label>
                    <select class="form-select" id="exportFormat">
                        <option value="json">JSON 格式 (推荐)</option>
                        <option value="xml">XML 格式</option>
                        <option value="csv">CSV 格式 (仅配置信息)</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">导出范围</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportRange" id="exportAll" value="all" checked>
                        <label class="form-check-label" for="exportAll">
                            导出所有模板
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportRange" id="exportMy" value="my">
                        <label class="form-check-label" for="exportMy">
                            仅导出我的模板
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportRange" id="exportPublic" value="public">
                        <label class="form-check-label" for="exportPublic">
                            仅导出公开模板
                        </label>
                    </div>
                </div>
                
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="exportIncludePreview" checked>
                        <label class="form-check-label" for="exportIncludePreview">
                            包含预览图像
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="confirmExport()">
                    <i class="fas fa-download me-1"></i>开始导出
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/labels_admin.js' %}"></script>
{% endblock %}